<template>
  <div>
    <div class="weui-cells__title">{{title}}</div>
    <div class="weui-cells weui-cells_form weui-cells_radio weui-cells_checkbox">
      <template v-for="(item, index) in list">
        <div class="weui-cell" v-show="!item.is_hide" v-if="item.type!='radio' && item.type!='switch'"
             :class="{'weui-cell_vcode':item.status != 'loading' && (!!item.img || !!item.button),
             'weui-cell_select':item.type=='select' || (item.label && typeof item.label != 'string'),
             'weui-cell_select-after':item.type=='select',
             'weui-cell_select-before':(item.label && typeof item.label != 'string')}"
             @click="$emit('on-click', index)">
          <div class="weui-cell__hd" v-if="item.label" :style="item.style">
            <label class="weui-label" v-if="typeof item.label == 'string'">{{item.label}}</label>
            <select class="weui-select" v-else v-model="item.selected_label" @change="$emit('on-label', index)">
              <option v-for="item in item.label" :value="item">{{item}}</option>
            </select>
          </div>
          <div class="weui-cell__bd">
            <!-- v-model和:type不能同时 -->
            <input class="weui-input" :placeholder="item.placeholder" v-model="item.value" :readonly="!!item.readonly"
                   v-if="!item.type || item.type=='text'" :style={textAlign:item.align} @input="onInput(index)"/>
            <input class="weui-input" type="password" :placeholder="item.placeholder" v-model="item.value"
                   :readonly="!!item.readonly"
                   v-if="item.type=='password'" @input="onInput(index)"/>
            <input class="weui-input" type="tel" :placeholder="item.placeholder" v-model="item.value"
                   :readonly="!!item.readonly"
                   v-if="item.type=='tel'" @input="onInput(index)"/>
            <input class="weui-input" type="date" :placeholder="item.placeholder" v-model="item.value"
                   :readonly="!!item.readonly"
                   v-if="item.type=='date'" @input="onInput(index)"/>
            <select class="weui-select" v-if="item.type=='select'" v-model="item.value"
                    @change="$emit('on-change', index)">
              <option v-for="_item in item.list" :value="_item.value">{{_item.label}}</option>
            </select>
            <template v-if="item.type=='textarea'">
              <textarea class="weui-textarea" :placeholder="item.placeholder" :rows="calc_textarea_row(item.value)"
                        v-model="item.value"
                        @input="onInput(index)">
		          </textarea>
              <div class="weui-textarea-counter"><span>{{item.value ? item.value.length : 0}}</span>/200</div>
            </template>
            <template v-if="item.type=='div'">
              <editable-div class="weui-textarea" :value="item.value" :id="index" @on-change="on_div_change">
              </editable-div>
              <div class="weui-textarea-counter"><span>{{item.value ? item.value.length : 0}}</span>/200</div>
            </template>
          </div>
          <div class="weui-cell__ft">
            <i class="weui-icon-clear" v-if="item.is_clear_show">
            </i>
            <i class="weui-icon-warn" v-if="item.status=='warn'" style="display:inline;">
            </i>
            <i class="weui-icon-success" v-if="item.status=='success'">
            </i>
            <i class="weui-loading" v-if="item.status=='loading'">
            </i>
            <img class="weui-vcode-img" :src="item.img" @click.stop="$emit('on-button', index)"
                 v-if="item.status!='loading' && item.img"/>
            <a href="javascript:;" class="weui-vcode-btn" @click.stop="$emit('on-button', index)"
               v-if="item.status!='loading' && !item.img && item.button">
              {{item.button}}
            </a>
          </div>
        </div>
        <label class="weui-cell weui-check__label" v-for="_item in item.list" v-if="item.type=='radio'">
          <div class="weui-cell__bd">
            <p>{{_item.label}}</p>
          </div>
          <div class="weui-cell__ft">
            <input type="radio" class="weui-check" :value="_item.value" v-model="item.value"
                   @click="onRadioClick(_item.value, index)">
            <span class="weui-icon-checked"></span>
          </div>
        </label>
        <div class="weui-cell weui-cell_switch" v-if="item.type=='switch'">
          <div class="weui-cell__bd">
            {{item.label}}
          </div>
          <div class="weui-cell__ft">
            <input class="weui-switch" type="checkbox" v-model="item.value" @change="onChange(index)"/>
          </div>
        </div>
        <label class="weui-cell weui-check__label" v-for="_item in item.list" v-if="item.type=='checkbox'">
          <div class="weui-cell__hd">
            <input type="checkbox" class="weui-check" v-model="item.value" :value="_item.value"
                   @click="$emit('on-change', index)">
            <i class="weui-icon-checked"></i>
          </div>
          <div class="weui-cell__bd">
            <p>{{_item.label}}</p>
          </div>
        </label>
      </template>
      <a href="javascript:void(0);" class="weui-cell weui-cell_link" v-if="more_label" @click="$emit('on-more')">
        <div class="weui-cell__bd">{{more_label}}</div>
      </a>
      <!--<div class="weui-cell">
          <div class="weui-cell__hd"><label for="" class="weui-label">时间</label></div>
          <div class="weui-cell__bd">
              <input class="weui-input" type="datetime-local" value="" placeholder=""/>
          </div>
      </div>-->
    </div>
    <div class="weui-cells__tips" :style={textAlign:tips.align} v-if="tips && tips.content">{{tips.content}}</div>
    <div class="weui-btn-area">
      <slot name="button">
      </slot>
    </div>
    <label class="weui-agree" v-if="agreement_name">
      <input type="checkbox" class="weui-agree__checkbox" v-model="inner_is_agree">
      <span class="weui-agree__text">
        阅读并同意<a href="javascript:void(0);" @click="$emit('on-agreement-click')">《{{agreement_name}}》</a>
      </span>
    </label>

    <!--<div class="weui-cells__title">表单报错</div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell weui-cell_warn">
            <div class="weui-cell__hd"><label for="" class="weui-label">卡号</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="number" pattern="[0-9]*" value="weui input error" placeholder="请输入卡号"/>
            </div>
            <div class="weui-cell__ft">
                <i class="weui-icon-warn"></i>
            </div>
        </div>
    </div>

    <div class="weui-cells__title">选择</div>
    <div class="weui-cells">

        <div class="weui-cell weui-cell_select weui-cell_select-before">
            <div class="weui-cell__hd">
                <select class="weui-select" name="select2">
                    <option value="1">+86</option>
                    <option value="2">+80</option>
                    <option value="3">+84</option>
                    <option value="4">+87</option>
                </select>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入号码"/>
            </div>
        </div>
    </div>
    <div class="weui-cells__title">选择</div>
    <div class="weui-cells">
        <div class="weui-cell weui-cell_select">
            <div class="weui-cell__bd">
                <select class="weui-select" name="select1">
                    <option selected="" value="1">微信号</option>
                    <option value="2">QQ号</option>
                    <option value="3">Email</option>
                </select>
            </div>
        </div>
    </div>-->
  </div>
</template>

<script>
  import EditableDiv from './EditableDiv'

  export default {
    components: {
      EditableDiv
    },
    props: {
      list: {
        type: Array,
        default() {
          return [{
            label: '手机号码',
            value: '',
            type: 'tel'
          }, {
            label: ['密码', '验证码'],
            selected_label: '密码',
            value: '',
            type: 'password',
            button: ''
          }]
        }
      },
      title: {
        type: String,
        default: '我是title'
      },
      tips: {
        type: Object,
        default() {
          return {
            content: '我是tips',
            align: 'left'
          }
        }
      },
      agreement_name: {
        type: String,
        default: '我是agreement_name'
      },
      is_agree: {
        type: Boolean,
        default: true
      },
      name: {
        type: String,
        default: '我是name'
      },
      more_label: {
        type: String,
        default: '添加更多'
      }
    },
    data() {
      return {
        value_list: [],
        inner_is_agree: true
      }
    },
    watch: {
      inner_is_agree(value) {
        this.$emit('on-agree-change', value)
      },
      is_agree(value) {
        if (value != this.inner_is_agree)
          this.inner_is_agree = value
      }
    },
    methods: {
      onInput(index) {
        if (this.value_list[index] != this.list[index].value) {
          this.value_list[index] = this.list[index].value
          this.$emit('on-change', index)
        }
      },
      calc_textarea_row(value) {
        if (!value)
          return 3
        var row = value.split('\n').length
        return row < 3 ? 3 : row
      },
      on_div_change(value, index) {
        this.$set(this.list[index], 'value', value)
        this.$emit('on-change', index)
      },
      onRadioClick(value, index) {
        this.$set(this.list[index], 'value', value)
        this.$emit('on-change', index)
      },
      onChange(index) {
        this.onInput(index)
      }
    }
  }
</script>

<style>
  @import '~weui/dist/style/weui.min.css';
</style>
